import React, {useEffect, useState} from 'react';
/* 
  useEffect:  使用副效果  react里面默认组件函数都是纯函数
    -Effect Hook 可以让你在函数组件中执行副作用操作
    -Effect 可以告诉 React 组件需要在挂载完成/更新完成/卸载前执行某些操作
    -useEffect接收第一个参数是一个回调函数,当达到条件的时候,会触发当前的回调函数
    -useEffect接收第二个参数是一个数组
    -数组中传入state,则当前state发生改变的时候触发当前effect中的回调函数
    -如果传递的是一个空数组,则useEffet回调函数只有在初始化阶段才执行
    -如果不传递第二个参数,则无论初始化还是更新的时候都会执行

  -useEffect的回调函数可以返回一个函数,当组件被卸载的时候,或再次渲染的时候,会执行这个这个函数,用来做收尾工具

  -useEffect可以根据逻辑书写多次

*/

export default function App(){
  const [count,setCount]=useState(0);
  const [isHot,setIsHot]=useState(true);

  useEffect(()=>{
    console.log('count和isHot执行了');
    return ()=>{
      console.log('isHot的Effect卸载函数'+count);
    }
  },[isHot,count])

  useEffect(()=>{
    console.log("count执行了")
  },[count])

  return (
    <div>
      <h1> count的值是{count}</h1>
      <button onClick={()=>{setCount(count+1)}} >累加器</button>

      <hr />

      <h1>今天的天气{isHot?"天晴朗":"下雨天"}</h1>
      <button onClick={()=>{setIsHot(!isHot)}}>天气变化</button>



    </div>
  )
}